// 字体注册
@font-face {
    font-family: headerFont;
    src: url('~@/style/font/优设标题黑.ttf');
}

// 布局
@mixin Layout($type) {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    // 横向布局
    @if $type =='row' {
        flex-direction: row;
    }
    // 纵向布局
    @if $type =='col' {
        flex-direction: column;
    }
    // 两端对齐
    @if $type =='between' {
        justify-content: space-between;
    }
    // 纵向两端对齐
    @if $type =='col-between' {
        
        flex-direction: column;
        justify-content: space-between;
    }
    
}
@mixin Center($type:center){
    // 居中布局
    @if $type == 'center'{
        justify-content: center;
        align-items: center;
    }
    @if $type == 'row' {
        justify-content: center;
    }
    @if $type == 'col' {
        align-items: center;
    }
}
// 滑动收缩模型
@mixin Switchover($left, $right) {

    .left-slide {
        transition: all 1s;
        transform: translateX(#{$left}px);
    }

    .right-slide {
        transition: all 1s;
        transform: translateX(#{$right}px);
    }
}
$Layout:'row','col','between','col-between';
@each $item in $Layout{
    [data-layout*=#{$item}]{
        @include Layout(#{$item});
    }
}

$Center:'center','row','col';
@each $item in $Center{
    [data-layout*=#{$item}-center]{
        @include Center(#{$item});
    }
}
[data-fill=fill]{
    width: 100%;
    height: 100%;
}
// 水平垂直居中
.center--v {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.center--h {
    margin: 0px auto
}

.center--hv {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}